<template>
    <div>
        <el-form v-model="formData">
            <el-input v-model="formData.sql" type="textarea"  :rows="10">
            
            </el-input>
            <div style="margin-top: 5px;">
                <el-button  plain type="primary" @click="triggerParse">解析</el-button>
            </div>
            
            
            <div>
                <el-form-item label="表格名称" desc="" prop="tableName">
                    <el-input v-model.trim="formData.tableName" placeholder="" clearable size="small"
                              style="width:120px;" />
                </el-form-item>
                <el-form-item label="表格中文" desc="" prop="tableNameChinese">
                    <el-input v-model.trim="formData.tableNameChinese" placeholder="" clearable size="small"
                              style="width:120px;" />
                </el-form-item>
            
            
            <div>
                <div>
                    字段列表
                </div>
                <div>
                    <el-table border ref="multipleTable" :data="detailsList" size="mini" class="tabletop" tooltip-effect="dark"
                              style="width: 100%" @selection-change="rows=>{         selectRows=rows      }"
                              @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                              >
                        <el-table-column type="selection" width="40" align="center"></el-table-column>
                        <el-table-column label="操作" width="55" align="center">
                            <template slot-scope="scope">
                                <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                                    <div>
                                        <el-button size="mini" type="text" icon="el-icon-edit"
                                                   @click="()=>triggerModify(scope.row,scope.$index)"> 修改
                                        </el-button>
                                        <el-button size="mini" type="text" icon="el-icon-delete"
                                                   @click="()=>handleDelete(scope.row,scope.$index)">删除
                                        </el-button>
                                    </div>
                                    <el-button slot="reference" type="text">操作</el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="!columnsHidden['filedName']" label="字段" prop="filedName" min-width="120px;">
                            <template slot-scope="scope">
                                <div> {{scope.row.filedName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="!columnsHidden['filedNameChinese']" label="字段中文" prop="filedNameChinese"
                                         min-width="120px;">
                            <template slot-scope="scope">
                                <div> {{scope.row.filedNameChinese}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="!columnsHidden['filedType']" label="字段类型" prop="filedType" min-width="120px;">
                            <template slot-scope="scope">
                           <div>
                               <dic-tag :code="'g_field_filedType'" v-model="scope.row.filedType"></dic-tag>
                           </div>
                            </template>
                        </el-table-column>
                        <!--  <el-table-column v-if="!columnsHidden['gTableId']" label="" prop="gTableId" min-width="120px;">
                              <template slot-scope="scope">
                                  <div> {{scope.row.gTableId}}</div>
                              </template>
                          </el-table-column>-->
                        <el-table-column label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
                            <template slot-scope="scope">
                                <span>{{dateFormatYYYYMMDD(scope.row.addTime)}}/{{scope.row.addUser}}</span></template>
                        </el-table-column>
                        <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                         v-if="!columnsHidden['lastEditTime/editUser']">
                            <template slot-scope="scope"><span>{{dateFormatYYYYMMDD(scope.row.lastEditTime)}}/{{scope.row.editUser}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            </div>
            
        </el-form>
    </div>
</template>
<script>
  import * as  api from '@/apis/gTable.api.js';
  import { dateFormatYYYYMMDD } from '@/utils';


function cleardot(str){
str=str&&str.replaceAll&&str.replaceAll('`','')
str=str&&str.replaceAll&&str.replaceAll(`'`,'')
return str
}
  import { default as FormDialog } from '@codegenarate/mydialogplus';


function adaptType(str){
  console.log("adaptType str",str);
  if(!str)return '';
   if(str.indexOf('int')>=0)return 2
  if(str.indexOf('text')>=0)return 1
  if(str.indexOf('varchar')>=0)return 1
    if(str.indexOf('string')>=0)return 1
      if(str.indexOf('date-time')>=0)return 4
  if(str.indexOf('datetime')>=0)return 4
}
  export default {
    data() {
      return {
        dateFormatYYYYMMDD,
        formData: {
          sql: '',
            'tableName': '',
            'tableNameChinese': '',
         'delState': ''
        },
        detailsList:[],
        columnsHidden:{}
      };
    },
    components:{
      svgIcon: () => import('@codegenarate/svg-icon'),
      dicSelect: () => import('@/components/dicselect.vue'),
      dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
    },
    methods:{
      initByDialog(){
      
      
      },
      tableRowClickOnece(row, tableRef, options) {
        var table = this.$refs[tableRef];
        if (options && options.canSelect) {
          var istrue = options.canSelect(row);
          if (!istrue) {
            table && table.toggleRowSelection(row, false);
          }
        }
        table && table.clearSelection();
        table && table.toggleRowSelection(row);
      },
      
      //输入ddl  解析得到 tablename fileds
      async triggerParse(){
        var result=await api.paseddl({sql:this.formData.sql})
         var data=result&&result.data;
      this.formData.tableName=cleardot(data.tableSource)
      var tableElementList=data&&data.tableElementList||[]
        for (let i = 0; i < tableElementList.length; i++) {
          tableElementList[i].filedNameChinese=cleardot(tableElementList[i].comment)
          tableElementList[i].comment=cleardot(tableElementList[i].comment)
          tableElementList[i].filedName=cleardot(tableElementList[i].name)
          tableElementList[i].name=cleardot(tableElementList[i].name)
          tableElementList[i].filedType=adaptType(cleardot(tableElementList[i].dateType))
          
        }
      this.detailsList=tableElementList
      
      debugger
      
      
      },
      handleDelete(row,index){
       this.detailsList.splice(index,1)
      },
      async triggerModify(row,index) {
        var self = this;
        var action=row&&row.id?'update':'add';
        var result = await FormDialog({
          width: '888px', title: row && row.id ? '编辑 字段' : '新增 字段',
          data() {
            return {
              ...row,
            };
          }, components: { modify: () => import('@/views/gCode/filed/modify.vue') },
        });
        if (!(result && result.success)) {
          return result;
        }
        /*if(action=='add'){
          this.detailsList.push(result&&result.data);
        }else if(action==='update'){
        }*/
        this.detailsList[index]=result&&result.data;
        
      },
      async submitByDialog(){
        var result2=await api.addTableWithElementList({
          tableSource:this.formData.tableName,
          tableElementList:this.detailsList
        })
        return result2
  
      }
    }
  };
</script>
